An Introduction to Socket.io
Socket.io is a javascript library used for bi-directional communication between web clients and servers. Just like Node.js, it's event based and easy to implement. Socket.io uses websockets (and occasionally AJAX polling), to provide real time updates to web apps. It's perfect for things like chat rooms and twitter feeds, or anything that benefits from server side 'push notifications'. The following tutorial is a basic implementation of the Socket.io library.
A Brief History
Before jumping into the Socket.io, it's important to understand why Socket.io is used today and how it came to be. Before websockets, developers relied heavily on AJAX polling to achieve real time update like effects. While asynchronous HTTP requests allowed for dynamic updates, it proved inefficient for several reasons. First, making continuous HTTP requests caused latency issues, especially with slower connections. Second, requests were still being made even if nothing changed on the server side. This made for am inefficient use of AJAX requests, as clients were polling regardless of an actual change in state.
Websockets to the Rescue
Then came along websockets. Websockets use a single TCP connection to leave an open bridge between clients and servers. This drastically reduces the overhead experienced with traditional HTTP requests, greatly reducing latency. Additionally, the server can push notifications to the client so updates are delivered as they happen (versus a continuous solicitation from the client).
Socket.io
Socket.io greatly simplifies the usage of websockets. It also incorporates some AJAX polling when necessary, as not all browsers support websockets, etc. Socket.io has both a client side and server side library. It's extremely easy to get started. The following is a quick example of how to get started using Socket.io.
Configuring Your Node.js App
To include Socket.io in your Node.js project, simply run:
npm install --save socket.io
This will install the socket.io module and save it to your dependencies (via your package.json file. The next step is to include the Socket.io library in your application's main configuration file, typically an 'index.js' or 'server.js' file:
var app = require('express');
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req,res){
res.render('index');
})
http.listen(5000, function(){
console.log('listening on port 5000');
}
This tutorial uses Express and EJS templates, however feel free to use the web framework / template engine of your choice. Note that you must bind the io module to an http server instance.
Configuring the Client
Now it's time to include the Socket.io client library in your view. Include the following script tag in your HTML code, just before the ending </body> tag.
<script src='/socket.io/socket.io.js'>
<script>
var socket = io();
</script>
This does a few things. It includes the client side Socket.io library with the script tag and initializes our socket.io client
Bringing it All Together: Bi-Directional Communication
Now that we've successfully set up both the socket.io client and server library, it's time to see the true value Socket.io brings to the table. In your Node.js configuration file, add the following code block:
io.on('connection', function(socket){
socket.on('clientTalk', function(){
console.log('client saying hi');
io.emit('serverTalk', 'serverData');
});
});
This defines a listener functon for the 'connection' event. The inner workings of this function will become more apparent later on. Jump back over to your client side HTML and modify the previously added script as follows:
<script src='/socket.io/socket.io.js'>
<script>
var socket = io();
function socketMagic(){
socket.emit('clientTalk');
}
socket.on('serverTalk', function(data){
document.getElementById('incoming').append(data);
});
</script>
Our socketMagic function emits an event clientTalk to the server. We've also added an event listener function for receiving the serverTalk event, which we defined in our server configuration file.
The final step is to add a client side action that will fire our newly defined socketMagic function. Below we've added a basic HTML button, which binds the onClick event to the socketMagic function.
<button onclick='socketMagic()'>Click me</button>
<div id='incoming'>
</div>
Notice that we've also added the empty div for appending messages received from our server.
If you've done everything right, you should see 'serverData' being appended every time you click the 'Click me' button.
Conclusion
Although this is a primitive example, it clearly demonstrates the bi-directional communication that occurs with Socket.io. Notice how the client is appending data directly from the server (in this case just a string 'serverData') without any HTTP request or AJAX.
